<template>
  <div class="man">
    <dnav :data="['系统设置', '用户管理']" />
    <el-input
      placeholder="请输入内容"
      v-model="keyword"
      class="input-with-select"
    >
      <el-button slot="prepend" @click="isadduser = true">添加用户</el-button>
      <el-button
        slot="append"
        @click="searchuser()"
        icon="el-icon-search"
      ></el-button>
      <el-button slot="append" @click="getuser()">重置</el-button>
    </el-input>

    <el-divider content-position="left">用户信息</el-divider>
    <el-table :data="userlist" border style="width: 100%">
      <el-table-column prop="man_id" label="id"> </el-table-column>
      <el-table-column prop="username" label="账号"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="truename" label="姓名"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column prop="tel" label="电话"> </el-table-column>
      <el-table-column width="300px" label="操作">
        <template slot-scope="prop">
          <el-button size="mini" type="primary" @click="upuser(prop.row)"
            >修改</el-button
          >
          <el-popconfirm title="确定删除吗？" @confirm="del(prop.row.man_id)">
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button size="mini" type="warning">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="isadduser" width="40%">
      <el-form
        label-position="left"
        label-width="80px"
        :model="addform"
        :rules="addrules"
        ref="addform"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="addform.username"></el-input> </el-form-item
        ><el-form-item label="密码" prop="password">
          <el-input v-model="addform.password"></el-input> </el-form-item
        ><el-form-item label="姓名" prop="truename">
          <el-input v-model="addform.truename"></el-input> </el-form-item
        ><el-form-item label="电话" prop="tel">
          <el-input v-model="addform.tel"></el-input> </el-form-item
        ><el-form-item label="角色" prop="cid">
          <el-select v-model="addform.cid" placeholder="">
            <el-option
              v-for="v in rolelist"
              :key="v.cid"
              :label="v.role_name"
              :value="v.cid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="adduser()">添加</el-button>
          <el-button @click="canceluser()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改用户 -->
    <el-dialog title="修改用户" :visible.sync="isupuser" width="40%">
      <el-form
        label-position="left"
        label-width="80px"
        :model="upform"
        :rules="uprules"
        ref="upform"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="upform.username"></el-input> </el-form-item
        ><el-form-item label="密码" prop="password">
          <el-input v-model="upform.password"></el-input> </el-form-item
        ><el-form-item label="姓名" prop="truename">
          <el-input v-model="upform.truename"></el-input> </el-form-item
        ><el-form-item label="电话" prop="tel">
          <el-input v-model="upform.tel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sureupuser()">修改</el-button>
          <el-button @click="cancelupuser()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isadduser: false, //添加模态框
      isupuser: false, //修改模态框
      keyword: "", //用户查询关键字
      userlist: [], //用户信息表单
      rolelist: [], //角色列表
      addform: {
        //添加用户表单
        username: "",
        truename: "",
        password: "",
        tel: "",
        cid: "",
      },
      addrules: {
        username: [{ required: true, message: "不能为空" }],
        truename: [{ required: true, message: "不能为空" }],
        password: [{ required: true, message: "不能为空" }],
        tel: [{ required: true, message: "不能为空" }],
        cid: [{ required: true, message: "不能为空" }],
      },
      upform: {
        //修改用户表单
        username: "",
        truename: "",
        password: "",
        tel: "",
        man_id: "",
      },
      uprules: {
        username: [{ required: true, message: "不能为空" }],
        truename: [{ required: true, message: "不能为空" }],
        password: [{ required: true, message: "不能为空" }],
        tel: [{ required: true, message: "不能为空" }],
      },
    };
  },
  methods: {
    getuser() {
      //获取用户数据
      this.$api.GetUser().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.userlist = res.data.data;
        }
      });
    },
    searchuser() {
      //查询用户
      if (this.keyword == "") {
        return;
      }
      console.log(this.keyword);
      this.$api.Searchman({ keyword: this.keyword }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.userlist = res.data.data;
          this.keyword = "";
        }
      });
    },
    getrole() {
      //获取角色
      this.$api.Getrole().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.rolelist = res.data.data;
        }
      });
    },
    adduser() {
      //添加用户
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.$api.Adduser(this.addform).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$refs.addform.resetFields();
              this.getuser();
              this.isadduser = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    canceluser() {
      //取消添加用户
      this.$refs.addform.resetFields();
      this.isadduser = false;
    },
    upuser(v) {
      //修改用户
      console.log(v);
      this.upform.username = v.username;
      this.upform.truename = v.username;
      this.upform.tel = v.tel;
      this.upform.password = v.password;
      this.upform.man_id = v.man_id;
      this.isupuser = true;
      // console.log(this.upform.man_id);
    },
    sureupuser() {
      //确认修改用户
      console.log(this.upform);
      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$api.Upuser(this.upform).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$refs.upform.resetFields();
              this.getuser();
              this.isupuser = false;
            } else {
              this.$message({
                type: "info",
                message: res.data.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelupuser() {
      //取消修改用户
      this.$refs.upform.resetFields();
      this.isupuser = false;
    },
    del(man_id) {
      //删除用户
      console.log(man_id);
      this.$api.Deluser({ man_id }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.getuser();
        }
      });
    },
  },

  mounted() {
    this.getuser();
    // this.searchuser();
    this.getrole();
  },
};
</script>

<style>
</style>